<template>
  <div class="chz">
    <!-- 更多热门医院 -->
    <!-- 按医院排行榜 -->
    <van-tabs v-model:active="active" sticky>
      <van-tab title="医院排行榜">
        <div class="beitou">
          <!-- 顶部弹出 -->
          <div class="erjia">
            <van-cell :title="sheng" @click="showPopup" />
            <van-icon class="icont" name="arrow-down" />
          </div>
          <van-popup style="height: 100vh" v-model:show="show" position="top">
            <van-area
              option-height="100%"
              :columns-num="2"
              :area-list="areaList"
              @confirm="que"
              @cancel="qu"
            />
          </van-popup>
          <div class="sear">
            <van-search
              style="height: 0.5rem"
              v-model="value"
              placeholder="搜索医院、科室、医生"
            />
          </div>
        </div>
        <van-dropdown-menu>
          <van-dropdown-item :title="tit" ref="itemRef">
            <div
              v-for="(item, index) in options1"
              :key="index"
              @click="changeTab(index)"
              class="quan"
              :class="{ selected: value1 === index }"
            >
              <p>
                {{ item.text }}
              </p>
            </div>
            <div style="padding: 5px 16px">
              <van-button type="primary" block round @click="onConfirm">
                确认
              </van-button>
            </div>
          </van-dropdown-item>

          <van-dropdown-item :title="titl" ref="itemRe">
            <div
              v-for="(item, index) in options2"
              :key="index"
              @click="changeqie(index)"
              class="quan"
              :class="{ selected: value2 === index }"
            >
              <p>
                {{ item.text }}
              </p>
            </div>
            <div style="padding: 5px 16px">
              <van-button type="primary" block round @click="onConfirm2">
                确认
              </van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
        <!-- 列表 -->
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-for="(item, index) in data" :key="index">
            <van-card
              num="99km"
              :title="item.nosocomium"
              :thumb="item.socoimage"
            >
              <template #tags>
                <van-tag plain type="primary">{{ item.socostate }}</van-tag>
                <van-tag plain type="primary">{{ item.socolv }}</van-tag>
              </template>
              <template #bottom>
                <p>科室：{{ item.socoadmin }}</p>
                <p>地址：{{ item.sococity }}</p>
              </template>
            </van-card>
          </div>
        </van-list>
      </van-tab>

      <!-- 按科室排 -->
      <van-tab title="按科室">
        <div class="beitou">
          <!-- 顶部弹出 -->
          <div class="erjia">
            <van-cell :title="sheng" @click="showPopup" />
            <van-icon class="icont" name="arrow-down" />
          </div>
          <van-popup style="height: 100vh" v-model:show="show" position="top">
            <van-area
              option-height="100%"
              :columns-num="2"
              :area-list="areaList"
              @confirm="que"
              @cancel="qu"
            />
          </van-popup>
          <div class="sear">
            <van-search
              style="height: 0.5rem"
              v-model="value"
              placeholder="搜索医院、科室、医生"
            />
          </div>
        </div>
        <van-dropdown-menu>
          <van-dropdown-item :title="title" ref="itemR">
            <van-tree-select
              v-model:active-id="activeId"
              v-model:main-active-index="activeIndex"
              :items="listks"
            />
          </van-dropdown-item>

          <van-dropdown-item :title="tit" ref="itemRef">
            <div
              v-for="(item, index) in options1"
              :key="index"
              @click="changeTab(index)"
              class="quan"
              :class="{ selected: value1 === index }"
            >
              <p>
                {{ item.text }}
              </p>
            </div>
            <div style="padding: 5px 16px">
              <van-button type="primary" block round @click="onConfirm">
                确认
              </van-button>
            </div>
          </van-dropdown-item>

          <van-dropdown-item :title="titl" ref="itemRe">
            <div
              v-for="(item, index) in options2"
              :key="index"
              @click="changeqie(index)"
              class="quan"
              :class="{ selected: value2 === index }"
            >
              <p>
                {{ item.text }}
              </p>
            </div>
            <div style="padding: 5px 16px">
              <van-button type="primary" block round @click="onConfirm2">
                确认
              </van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
        <!-- 列表 -->
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-for="(item, index) in data" :key="index">
            <van-card
              class="ckp"
              num="99km"
              :title="item.nosocomium"
              :thumb="item.socoimage"
            >
              <template #tags>
                <van-tag plain type="primary">{{ item.socostate }}</van-tag>
                <van-tag plain type="primary">{{ item.socolv }}</van-tag>
              </template>
              <template #bottom>
                <p>科室：{{ item.socoadmin }}</p>
                <p>地址：{{ item.sococity }}</p>
              </template>
              <template #footer>
                <van-button size="normal" class="cqgh">去挂号</van-button>
              </template>
            </van-card>
          </div>
        </van-list>
      </van-tab>
      <!-- 按疾病 -->
      <van-tab title="按疾病">
        <div class="beitou">
          <!-- 顶部弹出 -->
          <div class="erjia">
            <van-cell :title="sheng" @click="showPopup" />
            <van-icon class="icont" name="arrow-down" />
          </div>
          <van-popup style="height: 100vh" v-model:show="show" position="top">
            <van-area
              option-height="100%"
              :columns-num="2"
              :area-list="areaList"
              @confirm="que"
              @cancel="qu"
            />
          </van-popup>
          <div class="sear">
            <van-search
              style="height: 0.5rem"
              v-model="value"
              placeholder="搜索医院、科室、医生"
            />
          </div>
        </div>
        <van-dropdown-menu>
          <van-dropdown-item :title="title1" ref="itemR">
            <van-tree-select
              v-model:active-id="activeId"
              v-model:main-active-index="activeIndex"
              :items="items"
              @click-item="right(activeIndex, activeId)"
            />
          </van-dropdown-item>

          <van-dropdown-item :title="titl" ref="ite">
            <div
              v-for="(item, index) in options2"
              :key="index"
              @click="changeqie(index)"
              class="quan"
              :class="{ selected: value2 === index }"
            >
              <p>
                {{ item.text }}
              </p>
            </div>
            <div style="padding: 5px 16px">
              <van-button
                type="primary"
                block
                round
                @click="onConfirm3"
              >
                确认
              </van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
        <!-- 列表 -->
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-for="(item, index) in jibing" :key="index">
            <van-card
              class="ckp"
              num="99km"
              :title="item.nosocomium"
              :thumb="item.socoimage"
            >
              <template #tags>
                <van-tag plain type="primary">{{ item.socostate }}</van-tag>
                <van-tag plain type="primary">{{ item.socolv }}</van-tag>
              </template>
              <template #bottom>
                <p>科室：{{ item.socoadmin }}</p>
                <p>地址：{{ item.sococity }}</p>
              </template>
              <template #footer>
                <van-button size="normal" class="cqgh">去挂号</van-button>
              </template>
            </van-card>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { areaList } from '@vant/area-data'

import { useRoute } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const sheng = ref('北京市')
const show = ref(false)
const active = ref(2)
const showPopup = () => {
  show.value = true
}
const qu = () => {
  show.value = false
}
const que = event => {
  show.value = false
  sheng.value = event.selectedOptions[1].text
}

// 列表渲染
const list = ref([])
const getRmyy = async () => {
  await axios
    .get('/api/doctor', {
      params: {
        pageCode: 1,
        pageSize: 10,
      },
    })
    .then(res => {
      list.value = res.data.data
    })
}
getRmyy()

const data = ref([])
const finished = ref(false)
onMounted(() => {
  axios
    .get('/api/doctor', {
      params: {
        pageCode: 1,
        pageSize: 10,
      },
    })
    .then(res => {
      data.value = res.data.data
      finished.value = true
      jibing.value = res.data.data
    })
})

const tit = ref('医院类型')
const value1 = ref(0)
const itemRef = ref(null)
const changeTab = (index: number) => {
  value1.value = index
  tit.value = options1[index].text
  data.value = list.value.filter(item => {
    return item.socostate.includes(tit.value)
  })
  if (tit.value == '全部') {
    console.log('wsqb')
    data.value = list.value
  }
}
const options1 = [
  { text: '全部', value: 0 },
  { text: '公立', value: 1 },
  { text: '私立', value: 2 },
]
const onConfirm = () => {
  itemRef.value.toggle()
}

const titl = ref('医院等级')
const value2 = ref(0)
const changeqie = (index: number) => {
  value2.value = index
  titl.value = options2[index].text
  data.value = data.value.filter(item => {
    return item.socolv.includes(titl.value)
  })
  jibing.value = jibing.value.filter(item => {
    return item.socolv.includes(titl.value)
  })
}
const itemRe = ref(null)
const onConfirm2 = () => {
  itemRe.value.toggle()
}
const options2 = [
  { text: '不限', value: 0 },
  { text: '三级甲等', value: 1 },
  { text: '三级乙等', value: 2 },
  { text: '三级丙等', value: 1 },
  { text: '二级甲等', value: 2 },
  { text: '二级乙等', value: 2 },
  { text: '二级丙等', value: 1 },
  { text: '一级甲等', value: 2 },
  { text: '一级乙等', value: 2 },
  { text: '一级丙等', value: 1 },
]
const listks = ref([])
const title = ref('按科室')
const activeId = ref(1)
const activeIndex = ref(0)

const jibing = ref([])
const title1 = ref('疾病')
const itemR = ref(false)

const right = (activeIndex,activeId) => {
  itemR.value.toggle()
  for (let i = 0; i < items.length; i++) {
    for (let j = 0; j < items[i].children.length; j++) {
      if (activeId == items[i].children[j].id) {
        console.log(items[i].children[j].text);
        // console.log(activeId);
        
        title1.value = items[i].children[j].text
      }
    }
  }
  console.log(title1.value)
  console.log(list.value, 'hgb')
  jibing.value = list.value.filter(item =>
    item.socoadmin.includes(title1.value),
  )
}
const ite = ref(false)
const onConfirm3 = () => {
  ite.value.toggle()
}
const items = [
  {
    text: '全部',
    children: [{ text: '全部', id: 1 }],
  },
  {
    text: 'C',
    children: [
      { text: '创面修复科', id: 2 },
      { text: '超声波科', id: 3 },
    ],
  },
  {
    text: 'E',
    children: [
      { text: '儿童心理科', id: 4 },
      { text: '儿童口腔科', id: 5 },
      { text: '颌面外科', id: 6 },
    ],
  },
  {
    text: 'F',
    children: [
      { text: '风湿免疫科', id: 7 },
      { text: '妇科', id: 8 },
      { text: '妇幼保健科', id: 9 },
      { text: '妇女保健科', id: 10 },
      { text: '放射医学科', id: 11 },
    ],
  },
  {
    text: 'G',
    children: [
      { text: '感染科', id: 12 },
      { text: '过敏反应科', id: 13 },
      { text: '肛肠科', id: 14 },
      { text: '肝胆外科', id: 15 },
      { text: '骨科', id: 16 },
      { text: '骨瘤科', id: 17 },
    ],
  },
  {
    text: 'H',
    children: [
      { text: '呼吸内科', id: 18 },
      { text: '核医学科', id: 19 },
    ],
  },
  {
    text: 'J',
    children: [
      { text: '神经内科', id: 20 },
      { text: '甲状腺外科', id: 21 },
      { text: '计划生育科', id: 22 },
    ],
  },
  {
    text: 'K',
    children: [
      { text: '口腔预防保健科', id: 23 },
      { text: '口腔特诊课', id: 24 },
      { text: '口腔粘膜科', id: 25 },
      { text: '口腔正畸科', id: 26 },
      { text: '口腔修复科', id: 27 },
    ],
  },
  {
    text: 'L',
    children: [{ text: '老年病科', id: 28 }],
  },
  {
    text: 'M',
    children: [
      { text: '泌尿外科', id: 29 },
      { text: '麻醉科', id: 30 },
    ],
  },
  {
    text: 'N',
    children: [
      { text: '内分泌科', id: 31 },
      { text: '脑外科', id: 32 },
    ],
  },
  {
    text: 'P',
    children: [
      { text: '普通内科', id: 33 },
      { text: '普外科', id: 34 },
      { text: '皮肤性病科', id: 35 },
    ],
  },
  {
    text: 'Q',
    children: [{ text: '器官移植', id: 36 }],
  },
  {
    text: 'R',
    children: [{ text: '乳腺外科', id: 37 }],
  },
  {
    text: 'S',
    children: [
      { text: '肾内科', id: 38 },
      { text: '神经外科', id: 39 },
      { text: '烧伤外科', id: 40 },
    ],
  },
  {
    text: 'T',
    children: [{ text: '疼痛科', id: 41 }],
  },
  {
    text: 'W',
    children: [{ text: '微创外科', id: 42 }],
  },
  {
    text: 'X',
    children: [
      { text: '心血管内科', id: 43 },
      { text: '血液科', id: 44 },
      { text: '消化内科', id: 45 },
      { text: '血管外科', id: 46 },
      { text: '胸心外科', id: 47 },
      { text: '消化外科', id: 48 },
      { text: '小儿骨科', id: 49 },
      { text: '小儿外科', id: 50 },
      { text: '小儿营养保健科', id: 51 },
      { text: '小儿呼吸科', id: 52 },
      { text: '小儿消化科', id: 53 },
      { text: '小儿神经内科', id: 54 },
      { text: '小儿肾内科', id: 55 },
      { text: '小儿心内科', id: 56 },
      { text: '小儿内分泌科', id: 57 },
      { text: '小儿免疫科', id: 58 },
      { text: '小儿耳鼻喉', id: 59 },
      { text: '小儿血液科', id: 60 },
      { text: '小儿感染科', id: 61 },
      { text: '小儿精神科', id: 62 },
      { text: '小儿心外科', id: 63 },
      { text: '小儿胸外科', id: 64 },
      { text: '小儿泌尿科', id: 65 },
      { text: '小儿神经外科', id: 66 },
      { text: '小儿康复科', id: 67 },
      { text: '小儿急诊科', id: 68 },
      { text: '小儿传染病科', id: 69 },
      { text: '小儿遗传病科', id: 70 },
      { text: '新生儿科', id: 71 },
    ],
  },
  {
    text: 'Y',
    children: [
      { text: '眼科', id: 72 },
      { text: '牙周科', id: 73 },
      { text: '牙体牙髓科', id: 74 },
      { text: '医学影像科', id: 75 },
      { text: '预防保健科', id: 76 },
    ],
  },
  {
    text: 'Z',
    children: [
      { text: '职业病科', id: 77 },
      { text: '整形美容科', id: 78 },
      { text: '中医眼科', id: 79 },
      { text: '种植科', id: 80 },
      { text: '肿瘤内科', id: 81 },
      { text: '肿瘤外科', id: 82 },
      { text: '中医妇产科', id: 83 },
      { text: '中医儿科', id: 84 },
      { text: '中医皮肤科', id: 85 },
      { text: '中医内分泌科', id: 86 },
      { text: '中医消化科', id: 87 },
      { text: '中医呼吸科', id: 88 },
      { text: '中医肾病内科', id: 89 },
      { text: '中医风湿免疫科', id: 90 },
      { text: '中医心内科', id: 91 },
      { text: '中医神经内科', id: 92 },
      { text: '中医肿瘤科', id: 93 },
      { text: '中医血液科', id: 94 },
      { text: '中医肝病科', id: 95 },
      { text: '中医五官科', id: 96 },
      { text: '中医男科', id: 97 },
      { text: '针灸科', id: 98 },
      { text: '中医按摩科', id: 99 },
      { text: '中医外科', id: 100 },
      { text: '中医肛肠', id: 101 },
      { text: '中西医结合内科', id: 102 },
      { text: '中西医结合外科', id: 103 },
    ],
  },
]
</script>

<style lang="scss">
.beitou {
  width: 100vw;
  height: 8vh;
}
.erjia {
  width: 20vw;
  height: 1rem;
  float: left;
  position: relative;
}
.icont {
  font-size: 0.3rem;
  position: absolute;
  left: 17vw;
  top: 2.3vh;
}
.sear {
  float: left;
  width: 5.4rem;
  border: 2px solid green;
  background-color: #faf6f6;
  margin-left: 0.2rem;
  padding: 0.09rem;
  border-radius: 0.5rem;
  .van-search {
    width: 5.4rem;
    background-color: #fff;
  }
}
.aa {
  font-size: 0.5rem;
}

.quan {
  font-size: 0.3rem;
  width: 30%;
  text-align: center;
  float: left;
  height: 0.7rem;
  border-radius: 1rem;
  margin-top: 0.2rem;
  line-height: 0.1rem;
  margin-bottom: 0.5rem;
  margin: 0;
  margin-bottom: 0.1rem;
  color: #959393;
  background-color: #f6f6f6;
}
.selected {
  background-color: #00be8c;
  color: #fff;
}
.cqgh {
  background-color: #00be8c;
  color: #fff;
  border-radius: 0.5rem;
  height: 0.6rem;
}
.ckp {
  width: 90%;
  height: 3.3rem;
  background-color: #fff;
  border-bottom: 0.01rem solid #ccc;
  margin-left: 5%;
  margin-top: 0.1rem;
}
.chz {
  width: 100%;
  height: 100%;
  background-color: #fcf8f8;
}
</style>
